<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>隐式动态侧边栏</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="./42-隐式动态侧边栏.css">
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100vh;
			background-color: #333;
		}

		.container {
			width: 15px;
			height: 600px;
			position: fixed;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-color: #222;
			border-radius: 0 15px 15px 0;
			overflow: hidden;
			transition: 0.3s;
			cursor: pointer;
		}

		.container:hover {
			width: 150px;
			border-radius: 0 30px 30px 0;
		}

		.container:hover li a {
			color: #fff;
		}

		.container::before {
			content: "";
			width: 50%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			background-color: lightseagreen;
		}

		.container .top {
			width: calc(100% - 30px);
			margin-left: 30px;
			height: 20%;
			background-color: #222;
			border-radius: 0 0 0 20px;
			transition: 0.2s;
		}

		.container .middle {
			width: calc(100% - 60px);
			height: 10%;
			background-color: lightseagreen;
			margin-left: 40px;
			border-radius: 20px;
		}

		.container .bottom {
			width: calc(100% - 30px);
			height: 100%;
			margin-left: 30px;
			background-color: #222;
			border-radius: 20px 0 0 0;
		}

		.container li {
			position: absolute;
			top: var(--t);
			width: 100%;
			height: 10%;
			font-size: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.container li a {
			color: transparent;
			transition: 0.3s;
		}

		.container li:nth-child(1):hover~.top {
			height: 20%;
		}

		.container li:nth-child(2):hover~.top {
			height: 30%;
		}

		.container li:nth-child(3):hover~.top {
			height: 40%;
		}

		.container li:nth-child(4):hover~.top {
			height: 50%;
		}

		.container li:nth-child(5):hover~.top {
			height: 60%;
		}

		.container li:nth-child(6):hover~.top {
			height: 70%;
		}
	</style>
	<body>
		<div class="container">
			<li style="--t:20%;">
				<a href="#">
					<i class="fa fa-home" aria-hidden="true"></i>
				</a>
			</li>
			<li style="--t:30%;">
				<a href="#">
					<i class="fa fa-th-large" aria-hidden="true"></i>
				</a>
			</li>
			<li style="--t:40%;">
				<a href="#">
					<i class="fa fa-shopping-bag" aria-hidden="true"></i>
				</a>
			</li>
			<li style="--t:50%;">
				<a href="#">
					<i class="fa fa-user" aria-hidden="true"></i>
				</a>
			</li>
			<li style="--t:60%;">
				<a href="#">
					<i class="fa fa-cog" aria-hidden="true"></i>
				</a>
			</li>
			<li style="--t:70%;">
				<a href="#">
					<i class="fa fa-sign-out" aria-hidden="true"></i>
				</a>
			</li>
			<div class="top"></div>
			<div class="middle"></div>
			<div class="bottom"></div>
		</div>
	</body>

</html>